<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/10/18
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="user_list"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>

<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title"><spring:message code="label.tenant.register.device"/></h4>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="min-height:636px">
                <div class="form-horizontal">
                    <div style="padding-top: 35px">
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.id"/>:</label>

                            <div class="col-md-7">
                                <input id="uniqueId" class="form-control sie-input-border sie-input-uwh" onblur="verifyUniqueId(this),'<spring:message code="label.available"/>','<spring:message code="label.id.exist"/>'"/>
                                <span id="uniqueIdTips"></span>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.type"/>:</label>

                            <div class="col-md-7">
                                <select class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 2px 12px;" type="text" id="type" onchange="loadModel(this)">
                                    <option value="-1"><spring:message code="label.select"/></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.model"/>:</label>

                            <div class="col-md-7">
                                <select class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 2px 12px;" type="text" id="model"></select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.line"/>:</label>

                            <div class="col-md-7">
                                <input id="line" class="form-control sie-input-border sie-input-uwh"
                                       onblur=""/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.manufactory"/>:</label>

                            <div class="col-md-7">
                                <input id="manufactory" class="form-control sie-input-border sie-input-uwh"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.name"/> :</label>

                            <div class="col-md-7">
                                <input id="name" class="form-control sie-input-border sie-input-uwh"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.group"/>:</label>

                            <div class="col-md-7">
                                <input id="group" class="form-control sie-input-border sie-input-uwh"/>
                            </div>
                        </div>

                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.device.img"/>:</label>

                            <div class="col-md-7">
                                <div class="sie-u-avatar">
                                    <%--<img src="/images/avatar.png"/>--%>
                                </div>
                                <div class="progress progress-xs hidden sie-progress-width">
                                    <div class="progress-bar progress-bar-primary progress-bar-striped"
                                         role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    </div>
                                </div>
                                <div class="sie-avatar-parent">
                                    <input id="avatar" class="hidden" type="file" name="upload"
                                           accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/>
                                    <a class="solid-button-gray" href="javascript:;"
                                       style="margin-top: 10px;" onclick="changeClick()"><spring:message code="label.user.browse"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.device.purchase.date"/>:</label>

                            <div class="col-md-7">
                                <div class="sie-calendar-parent">
                                    <input type="text" readonly="readonly" class="form-control sie-calendar-input" id="purchaseDate">
                                    <img src="/images/calendar.png" class="sie-calendar-img">
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.description"/>:</label>

                            <div class="col-md-7">
                                <textarea id="description" rows="5" class="form-control sie-textarea-border"></textarea>
                            </div>
                        </div>
                        <div style="text-align: center;margin-top: 30px;width: 100%;">
                            <a id="create" class="solid-button-orange" style="width: 80px"
                               href="javascript:;"><spring:message code="label.admin.confirm"/></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/jquery.fileupload.js"></script>
<script>
    $(function () {
        $('#purchaseDate').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });

        $('input[type=file]').fileupload({
            url: '/api/v1/image/upload',
            type: "post",
            dataType: 'json',
            change: function (e, data) {
                if (data.files.length > 1) {
                    alert("Max 1 files are allowed");
                    return false;
                }
            },
            drop: function (e, data) {
                if (data.files.length > 1) {
                    alert("Max 1 files are allowed");
                    return false;
                }
            },
            progressall: function (e, data) {
                console.log("22222222222222222222" + new Date());
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress-bar').css(
                        'width',
                        progress + '%'
                );
                $(e.target).parent().siblings("div.progress").removeClass("hidden");
            },
            done: function (e, data) {
                console.log("33333333333333333333333333" + new Date());
                var $input = $(e.target);
                $input.parent().siblings("div.progress").addClass("hidden");
                if (data.result.result != 'SUCCESS') {
                    alert('<spring:message code="label.tenant.upload.file.fail"/>');
                    return;
                }
                $(".sie-u-avatar").html("");
                var name = data.result.name;
                var remove = '<a href="javascript:;" class="sie-btn-remove" onclick="$(this).parent().html(\'\');">&times;</a>';
                var item = '<a href="' + data.result.url + '" target="_blank"><img src="' + data.result.url + '" data-name="' + name + '"/></a>';
                $(".sie-u-avatar").append(remove).append(item);
                console.log(name);
            }
        });

        $.ajax({
            url: "/partner/{tenant}/api/v1/device/getMetaType".replace("{tenant}", getKeyByUrl()),
            type: "get",
            success: function (data) {
                console.log(data);
                var metas = data.data;
                for (var i = 0; i < metas.length; i++) {
                    $("#type").append($("<option></option>").attr("value", metas[i]).text(metas[i]));
                }
            },
            error: function (e) {
                console.log(e);
            }
        });

        $("#create").click(function () {
            if($("#uniqueIdTips").attr("class") == "no"){
                swal("Error!",'<spring:message code="label.tenant.device.id.not.available"/>',"error");
                return;
            }
            if($("#uniqueId").val().trim() == ""){
                swal("Error!",'<spring:message code="label.tenant.please.enter.device.id"/>',"error");
                return;
            }
            if($("#type").val() == -1){
                swal("Error!",'<spring:message code="label.tenant.please.choice.device.type"/>',"error");
                return;
            }
            if($("#model").val().trim() == ""){
                swal("Error!",'<spring:message code="label.tenant.please.choice.device.model"/>',"error");
                return;
            }

            var name;
            if ($(".sie-u-avatar").find("img").length > 0) {
                name = $(".sie-u-avatar").find("img").data("name");
            } else {
                name = '';
            }
            var data = JSON.stringify({
                line: $("#line").val(),//line
                type: $("#type").find("option:selected").val(),//type
                uniqueId: $("#uniqueId").val(),//机床id
                manufactory: $("#manufactory").val(),
                name: $("#name").val(),
                address: $("#DNS").val(),
                group: $("#group").val(),
                model: $("#model").find("option:selected").val(),
                image: name,
                purchaseDate: $("#purchaseDate").val(),
                description: $("#description").val()
            });
            console.log(data);
            $.ajax({
                url: "/partner/{tenant}/api/v1/device/create".replace("{tenant}", getKeyByUrl()),
                type: "post",
                data: data,
                contentType: "application/json;charset=utf-8",
                success: function () {
                    window.location.replace("/partner/{tenant}/device/devices#eventSub".replace("{tenant}", getKeyByUrl()));
                },
                fail: function () {
                    swal("Error!", "", "error");
                }
            })
        });
        bindDateInputClickEvent();
    });
    function loadModel(_this) {
        $("#model").html("");
        var value = $(_this).find("option:selected").val();
        $.ajax({
            url: "/partner/{tenant}/api/v1/device/getMetaModel".replace("{tenant}", getKeyByUrl()),
            type: "get",
            data: {type: value},
            success: function (data) {
                console.log(data);
                $.each(data.data, function (index, meta) {
                    $("#model").append($("<option></option>").attr("value", meta).text(meta));
                });
            },
            error: function (e) {
                console.log(e);
            }
        });
    }
</script>